<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投递成功 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        /* 基础样式 */
        body {
            background-color: #f5f7fa;
            color: #333;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        
        .app-container {
            max-width: 375px; /* 标准小程序尺寸 */
            margin: 0 auto;
            background-color: #f5f7fa;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* 头部导航 */
        .page-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .back-button {
            border: none;
            background: none;
            font-size: 18px;
            color: #333;
            padding: 0;
            margin-right: 12px;
            display: flex;
            align-items: center;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        
        .page-title {
            font-size: 16px;
            font-weight: 600;
            flex: 1;
            text-align: center;
            margin: 0;
        }
        
        /* 成功状态 */
        .success-container {
            background-color: #fff;
            padding: 40px 20px;
            text-align: center;
            margin-bottom: 16px;
        }
        
        .success-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 16px;
            background-color: #f0faff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4863dc;
            font-size: 40px;
        }
        
        .success-title {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            margin: 0 0 8px 0;
        }
        
        .success-desc {
            font-size: 14px;
            color: #666;
            margin: 0 0 24px 0;
            line-height: 1.6;
        }
        
        /* 职位信息 */
        .job-card {
            background-color: #fff;
            margin: 0 16px 16px;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }
        
        .job-header {
            display: flex;
            margin-bottom: 12px;
        }
        
        .job-logo {
            width: 50px;
            height: 50px;
            border-radius: 4px;
            object-fit: contain;
            background-color: #f7f7f7;
            border: 1px solid #eee;
            margin-right: 12px;
        }
        
        .job-info {
            flex: 1;
        }
        
        .job-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin: 0 0 6px;
        }
        
        .job-company {
            font-size: 13px;
            color: #666;
            margin: 0 0 6px;
        }
        
        .job-salary {
            font-size: 14px;
            color: #ff6b6b;
            font-weight: 500;
            margin: 0;
        }
        
        /* 提示卡片 */
        .tips-card {
            background-color: #fff;
            margin: 0 16px 16px;
            border-radius: 8px;
            padding: 16px;
        }
        
        .tips-title {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin: 0 0 12px 0;
            display: flex;
            align-items: center;
        }
        
        .tips-title i {
            color: #4863dc;
            margin-right: 6px;
        }
        
        .tips-content {
            color: #666;
            font-size: 13px;
            line-height: 1.6;
            margin: 0;
        }
        
        .tips-item {
            display: flex;
            margin-bottom: 10px;
        }
        
        .tips-item:last-child {
            margin-bottom: 0;
        }
        
        .tips-bullet {
            color: #4863dc;
            margin-right: 8px;
        }
        
        /* 按钮组 */
        .action-buttons {
            padding: 16px;
            margin-top: auto;
        }
        
        .primary-button {
            display: block;
            width: 100%;
            height: 44px;
            line-height: 44px;
            text-align: center;
            background-color: #4863dc;
            color: white;
            font-size: 16px;
            font-weight: 500;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            margin-bottom: 12px;
            -webkit-tap-highlight-color: transparent;
        }
        
        .primary-button:active {
            opacity: 0.85;
        }
        
        .secondary-button {
            display: block;
            width: 100%;
            height: 44px;
            line-height: 44px;
            text-align: center;
            background-color: #fff;
            color: #4863dc;
            font-size: 16px;
            font-weight: 500;
            border-radius: 4px;
            border: 1px solid #4863dc;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        
        .secondary-button:active {
            background-color: #f5f7ff;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="page-header">
            <h1 class="page-title">投递成功</h1>
        </header>
        
        <!-- 成功状态区域 -->
        <section class="success-container">
            <div class="success-icon">
                <i class="bi bi-check-lg"></i>
            </div>
            <h2 class="success-title">恭喜，简历投递成功</h2>
            <p class="success-desc">我们会尽快将您的简历呈现给企业，请耐心等待企业的反馈。</p>
        </section>
        
        <!-- 职位信息 -->
        <section class="job-card">
            <div class="job-header">
                <img src="../img/company1.jpg" alt="公司Logo" class="job-logo" id="company-logo">
                <div class="job-info">
                    <h3 class="job-title" id="job-title">前端开发工程师</h3>
                    <p class="job-company" id="company-name">字节跳动</p>
                    <p class="job-salary" id="job-salary">20k-30k · 14薪</p>
                </div>
            </div>
        </section>
        
        <!-- 提示卡片 -->
        <section class="tips-card">
            <h3 class="tips-title">
                <i class="bi bi-lightbulb"></i>
                您可以做什么？
            </h3>
            <div class="tips-content">
                <div class="tips-item">
                    <div class="tips-bullet">1.</div>
                    <div>查看投递状态：随时关注企业的处理进度</div>
                </div>
                <div class="tips-item">
                    <div class="tips-bullet">2.</div>
                    <div>完善简历：提高简历质量，增加通过率</div>
                </div>
                <div class="tips-item">
                    <div class="tips-bullet">3.</div>
                    <div>浏览更多职位：多投递，多增加机会</div>
                </div>
            </div>
        </section>
        
        <!-- 按钮组 -->
        <div class="action-buttons">
            <button class="primary-button" id="check-status-btn">查看投递状态</button>
            <button class="secondary-button" id="continue-btn">继续浏览职位</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const jobId = urlParams.get('job_id') || '1001';
            const applicationId = urlParams.get('application_id') || new Date().getTime();
            
            // 职位信息
            const jobTitles = {
                '1001': '前端开发工程师',
                '1002': '产品经理',
                '1003': '后端开发工程师',
                '1004': '数据分析师'
            };
            
            const companyNames = {
                '1001': '字节跳动',
                '1002': '腾讯',
                '1003': '阿里巴巴',
                '1004': '百度'
            };
            
            const jobSalaries = {
                '1001': '20k-30k · 14薪',
                '1002': '15k-25k · 13薪',
                '1003': '25k-40k · 16薪',
                '1004': '18k-30k · 14薪'
            };
            
            // 填充职位信息
            document.getElementById('job-title').textContent = jobTitles[jobId] || '未知职位';
            document.getElementById('company-name').textContent = companyNames[jobId] || '未知公司';
            document.getElementById('job-salary').textContent = jobSalaries[jobId] || '';
            
            // 公司logo根据公司名称设置
            const companyLogo = document.getElementById('company-logo');
            if (jobId === '1001') companyLogo.src = '../img/company1.jpg';
            else if (jobId === '1002') companyLogo.src = '../img/company2.jpg';
            else if (jobId === '1003') companyLogo.src = '../img/company3.jpg';
            else if (jobId === '1004') companyLogo.src = '../img/company4.jpg';
            
            // 查看投递状态按钮
            document.getElementById('check-status-btn').addEventListener('click', function() {
                window.location.href = 'application-detail.html?id=' + applicationId + '&status=pending';
            });
            
            // 继续浏览职位按钮
            document.getElementById('continue-btn').addEventListener('click', function() {
                window.location.href = 'internships.html';
            });
        });
    </script>
</body>
</html> 